<template>
    <div>
        <div class="left_user_nav" v-for="(menu, index) in menuData" :key="index">
            <nuxt-link :to="menu.url"><div class="left_nav_title">{{ menu.title }}</div></nuxt-link>
            <div class="left_nav_content" id="list_left">
                <div class="nav_items" :ref="'child'+childMenusIndex" :class="childMenus.active ? 'on': '' " v-for="(childMenus, childMenusIndex) in menu.childs" :key="childMenusIndex">
                    <div class="parent_nav all_order" @click="openChilds('child'+childMenusIndex, 'grandson'+childMenusIndex, childMenus)">
                        <span class="parent_nav_hd">{{ childMenus.title }}</span>
                        <span class="icon el-icon-caret-right"></span>
                    </div>
                    <el-collapse-transition>
                        <div class="child_nav_content" :ref="'grandson'+childMenusIndex" v-show="childMenus.active" style="display:block;">
                            <nuxt-link :to="grandson.url" :key="grandsonIndex" :class="grandson.active ? 'active': ''" v-for="(grandson, grandsonIndex) in childMenus.childs">{{ grandson.title }}</nuxt-link>
                        </div>
                    </el-collapse-transition>
                </div>
                <div class="nav_items">
                    <div class="parent_nav">
                        <span class="parent_nav_hd">退出登录</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import menuData from "@/plugins/menu-nav-data";
import managerMenuData from "@/plugins/manager-nav-data";
import { getUser } from "@/utils/auth";
export default {
    data() {
        return {
            menuData: []
        };
    },
    methods: {
        activeMenu: function () {
            var _this = this;
            for (var item in _this.menuData) {
                for (var itemChild in _this.menuData[item].childs) {
                    for (var grandsonChild in _this.menuData[item].childs[itemChild].childs) {
                        if (_this.menuData[item].childs[itemChild].childs[grandsonChild].url == _this.$route.path) {

                            _this.menuData[item].childs[itemChild].childs[grandsonChild].active = true;
                            _this.menuData[item].childs[itemChild].active = true;
                            return;
                        }
                        if (_this.$route.name.split("-").length > 2) {
                            if (_this.$route.path.indexOf(_this.menuData[item].childs[itemChild].childs[grandsonChild].url) != -1) {
                                _this.menuData[item].childs[itemChild].childs[grandsonChild].active = true;
                                _this.menuData[item].childs[itemChild].active = true;
                                return;
                            }
                        }
                    }
                }
            }
            // console.log("结束循环");
            // this.$forceUpdate();
            // 循环1级
            // this.menuData.forEach(item => {

            //     // 循环2级
            //     item.childs.forEach(itemChild => {

            //         // 循环3级
            //         itemChild.childs.forEach(grandsonChild => {

            //             if (grandsonChild.url == this.$route.path) {

            //                 grandsonChild.active = true;
            //                 itemChild.active = true;
            //                 return true;
            //             }
            //         })
            //     })
            // })
            // return false;
        },
        openChilds: function (child, grandson, item) {
            if (this.$refs[child][0].classList.contains('on')) {
                this.$refs[child][0].classList.remove("on");
                item.active = false;
            } else {
                this.$refs[child][0].classList.add("on");
                item.active = true;
            }
        }
    },
    mounted: function () {
        this.menuData = JSON.parse(JSON.stringify(menuData));
        if (getUser().type == 1) {
            this.menuData = JSON.parse(JSON.stringify(managerMenuData));
        }
        this.activeMenu();
    }
}
</script>